{extend name='../app/admin/view/common/pop.html' /}
{block name="style"}
<style>
    dd {
        display: inline-block;
        /* margin-left: 10px; */
        border: 1px solid #eeeeee;
        padding: 10px;
    }
    dd i{
        line-height: normal;
    }
    dt{
        padding: 10px;
    }
</style>
{/block}
{block name="content"}
<form action="" style="padding:15px;" class="layui-form">

    <fieldset class="layui-elem-field">
        <legend>分类信息</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block ">
                    <input id="tree" type="text" placeholder="请选择" value="" readonly="readonly" class="layui-input">
                    <input type="hidden" name="goods[cate_id]" value="0">
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>基本信息</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block ">
                    <input type="text" name="goods[name]" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">原价</label>
                <div class="layui-input-block ">
                    <input type="number" name="goods[origin_price]" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">成本价</label>
                <div class="layui-input-block ">
                    <input type="number" name="goods[cost_price]" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">售价</label>
                <div class="layui-input-block ">
                    <input type="number" name="goods[price]" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-block ">
                    <input type="number" name="goods[stock]" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block ">
                    <input type="number" name="goods[unit]" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品须知</label>
                <div class="layui-input-block ">
                    <textarea name="goods[desc]" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>商品图片</legend>
        <div class="layui-field-box">

            <div class="layui-form-item">
                <label for="" class="layui-form-label">轮播图</label>
                <div class="layui-input-block j-upload">
                    <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm j-upload-dom">
                        <input type="file"
                               name="goods[images][]"
                               id="upload_file_images"
                               class="j-file"
                               onchange="upload_images(event,this)"
                               accept="image/*"
                               multiple="multiple"
                        />
                        <input type="text" class="j-upload-input" readonly value=""/>
                        <input type="hidden" class="j-upload-input" readonly value="" name="imagesfile"/>
                        <i class="layui-icon layui-icon-upload"></i>选择文件</a>
                </div>
                <div class="j-img-preview j-img-preview-images">
                </div>
                <div class="layui-input-block j-form-tips">请选择商品轮播图</div>
                <script type="application/javascript">
                    function upload_images(event, e) {
                        var files = event.target.files
                            , preview = document.querySelector('.j-img-preview-images');

                        if ($(preview).children().length > 0) {
                            $(preview).children().remove();
                        }

                        if (files) {
                            $.each(files, function (index, file) {
                                let reader = new FileReader()
                                reader.addEventListener("load", function (e) {

                                    var image = new Image();
                                    image.title = file.name;
                                    image.src = this.result;
                                    image.classList.add('j-img-preview-item');
                                    image.ondblclick = function (e) {
                                        $(e.currentTarget).parent().prev().find('input[type=text]').val('')
                                        $(e.currentTarget).parent().prev().find('input[type=hidden]').val('')
                                        $(e.currentTarget).remove();
                                    }
                                    preview.append(image);
                                }, false);

                                reader.readAsDataURL(file);
                            })
                        }

                        $(e).next().val($(e).val())
                    }
                </script>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">缩略图</label>
                <div class="layui-input-block j-upload">
                    <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm j-upload-dom">
                        <input type="file"
                               name="goods[thumb]"
                               id="upload_file_thumb"
                               class="j-file"
                               onchange="upload_thumb(event,this)"
                               accept="image/*"
                        />
                        <input type="text" class="j-upload-input" readonly value=""/>
                        <input type="hidden" class="j-upload-input" readonly value="" name="thumbfile"/>
                        <i class="layui-icon layui-icon-upload"></i>选择文件</a>
                </div>
                <div class="j-img-preview j-img-preview-thumb">
                </div>
                <div class="layui-input-block j-form-tips">请选择商品缩略图</div>
                <script type="application/javascript">
                    function upload_thumb(event, e) {
                        var files = event.target.files
                            , preview = document.querySelector('.j-img-preview-thumb');

                        if ($(preview).children().length > 0) {
                            $(preview).children().remove();
                        }

                        if (files) {
                            $.each(files, function (index, file) {
                                let reader = new FileReader()
                                reader.addEventListener("load", function (e) {

                                    var image = new Image();
                                    image.title = file.name;
                                    image.src = this.result;
                                    image.classList.add('j-img-preview-item');
                                    image.ondblclick = function (e) {
                                        $(e.currentTarget).parent().prev().find('input[type=text]').val('')
                                        $(e.currentTarget).parent().prev().find('input[type=hidden]').val('')
                                        $(e.currentTarget).remove();
                                    }
                                    preview.append(image);
                                }, false);

                                reader.readAsDataURL(file);
                            })
                        }

                        $(e).next().val($(e).val())
                    }
                </script>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">视  频</label>
                <div class="layui-input-block j-upload">
                    <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm j-upload-dom">
                        <input type="file"
                               name="goods[video]"
                               id="upload_file_video"
                               class="j-file"
                               onchange="upload_video(event,this)"
                               accept="video/*"
                        />
                        <input type="text" class="j-upload-input" readonly value=""/>
                        <input type="hidden" class="j-upload-input" readonly value="" name="videofile"/>
                        <i class="layui-icon layui-icon-upload"></i>选择文件</a>
                </div>
                <div class="j-img-preview j-img-preview-video">
                </div>
                <div class="layui-input-block j-form-tips">请选择商品视频</div>
                <script type="application/javascript">
                    function upload_video(event, e) {
                        var files = event.target.files
                            , preview = document.querySelector('.j-img-preview-video');

                        if ($(preview).children().length > 0) {
                            $(preview).children().remove();
                        }

                        if (files) {
                            $.each(files, function (index, file) {
                                let reader = new FileReader()
                                reader.addEventListener("load", function (e) {

                                    var image = new Image();
                                    image.title = file.name;
                                    image.src = this.result;
                                    image.classList.add('j-img-preview-item');
                                    image.ondblclick = function (e) {
                                        $(e.currentTarget).parent().prev().find('input[type=text]').val('')
                                        $(e.currentTarget).parent().prev().find('input[type=hidden]').val('')
                                        $(e.currentTarget).remove();
                                    }
                                    preview.append(image);
                                }, false);

                                reader.readAsDataURL(file);
                            })
                        }

                        $(e).next().val($(e).val())
                    }
                </script>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>商品规格</legend>
        <div class="layui-field-box">

            <div class="layui-form-item">
                <label for="" class="layui-form-label">商品规格</label>
                <div class="layui-input-block">
                    <input type="radio" name="goods[use_attr]" value="0" title="单规格">
                    <input type="radio" name="goods[use_attr]" value="1" title="多规格" checked>
                </div>
            </div>

            <div class="attr" style="display: none;">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>图片</th>
                                <th>售价</th>
                                <th>成本价</th>
                                <th>原价</th>
                                <th>库存</th>
                                <th>重量（KG）</th>
                                <th>体积（m³）</th>
                                <th>商品编号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>贤心</td>
                                <td><input type="text" name="attrs[price]"></td>
                                <td><input type="text" name="attrs[cost_price]"></td>
                                <td><input type="text" name="attrs[origin_price]"></td>
                                <td><input type="text" name="attrs[stock]"></td>
                                <td><input type="text" name="attrs[weight]"></td>
                                <td><input type="text" name="attrs[volume]"></td>
                                <td><input type="text" name="attrs[goods_no]"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="attrs">
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">规格选择</label>
                    <div class="layui-input-block">
                        <select name="a">
                            <option value="">默认</option>
                            <option value="2">尺寸</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="" class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <dl>
                            <dt>颜色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dt>
                            <dd>黑色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>白色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>蓝色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>绿色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>紫色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>彩色&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>

                            <dt>尺码&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dt>
                            <dd>37&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>37&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>37&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                            <dd>37&nbsp;<i class="layui-icon layui-icon-close-fill"></i></dd>
                        </dl>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="" class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-normal layui-btn-sm" href="javascript:;" onclick="buildNewAttr()">添加新规格</a>
                        <a class="layui-btn layui-btn-primary layui-btn-sm" href="javascript:;" onclick="">立即生成</a>
                    </div>
                </div>
            </div>

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>商品活动</legend>
        <div class="layui-field-box">

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>商品详情</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label for="" class="layui-form-label"></label>
                <div class="layui-input-block" style="width:80%;">
                    <script id="container_detail" name="goods[detail]" type="text/plain"></script>
                </div>
                <div class="layui-input-block j-form-tips">请输入商品详情</div></div>
            <script type="text/javascript">
                var detail;
                $(document).ready(function(){
                    detail = UE.getEditor('container_detail');
                })
            </script>
        </div>
        </div>
    </fieldset>
</form>
{/block}


{block name="script"}
<script type="application/javascript" src="__EXTRA__ueditor/editor_config.js"></script>
<script type="application/javascript" src="__EXTRA__ueditor/editor_all.js"></script>
<script>
    layui.config({
        base: '/static/extra/layui/plugins/treeselect/module/'
    }).extend({
        treeSelect: 'treeSelect/treeSelect'
    }).use(['treeSelect', 'form', 'layer'], function () {
        var treeSelect = layui.treeSelect,
            form = layui.form,
            layer = layui.layer;
        $ = layui.jquery;

        form.render();

        treeSelect.render({
            elem: '#tree',
            data: '{:plugin_url("cates/getSelectTree")}',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请选择菜单',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: false
                },
                line: { // 连接线
                    enable: true // 是否开启：true/false
                }
            },
            // 点击回调
            click: function (d) {
                console.log(d);
                $('input[name=cate_id]').val(d.current.id);
            },
            // 加载完成后的回调函数
            success: function (d) {
                treeSelect.refresh('tree');
            }
        });


        form.on('submit(create)', function (data) {
            var loading,
                fd = new FormData(document.getElementById("form"));
            $.ajax({
                url: "{:plugin_url()}",
                type: 'post',
                processData: false,//必须
                contentType: false,//必须
                data: fd,
                beforeSend: function () {
                    loading = layer.load();
                },
                complete: function () {
                    layer.close(loading);
                },
                success: function (r) {
                    layer.msg(r.msg);
                    if (r.code == 1) {
                        setTimeout(function () {
                            parent.location.reload();
                        }, 1000)
                    }
                },
                error: function (r) {
                    layer.msg('系统异常');
                    console.log(r);
                }
            });
            return false;
        });

    })
</script>
{/block}